<template>
	<view class="content">
		<!-- 导航栏 -->
		<headerView />
		<!-- banner -->
		<view class="absolute">
			<view class="titleView">
				<view class="titleView-text">Contact Us</view>
				<view class="titleView-span">
					Home /
					<text>Contact Us</text>
				</view>
			</view>
		</view>

		<!-- 联系我们 -->
		<view class="cardView action">
			<view class="cardView-conter">
				<view class="brandView">
					<el-row class="elRow" justify="center" gutter="40">
						<el-col :xs="24" :sm="24" :md="12" :lg="12" class="elCol">
							<view class="brandView-title">{{ brandData.title }}</view>
							<view class="brandView-text">{{ brandData.text }}</view>
							<view class="brandView-list" v-for="(item, index) in brandData.list" :key="index">
								<view class="brandView-list-icon">
									<u-icon :customPrefix="item.icon" color="rgb(26,54,93)" size="18px" />
								</view>

								<view class="brandView-list-info">
									<view class="brandView-list-info-title">{{ item.title }}</view>
									<view class="brandView-list-info-text" v-for="(text, tIndex) in item.texts" :key="tIndex">
										{{ text }}
									</view>
								</view>
							</view>
							<view class="iconVeiw">
								<view class="icon" v-for="(item, index) in brandData.contactInformation" :key="index">
									<u-icon :customPrefix="item.icon" color="#fff" size="18px"></u-icon>
								</view>
							</view>
						</el-col>
						<el-col :xs="24" :sm="24" :md="12" :lg="12" class="elCol">
							<formView />
						</el-col>
					</el-row>
				</view>
			</view>
		</view>

		<view class="cardView">
			<view class="cardView-conter">
				<view class="positionVeiw">
					<view class="positionVeiw-title">我们的位置</view>
					<view class="positionVeiw-tetx">欢迎莅临REMAX展厅，我们的专业顾问将为您提供一对一的咨询服务</view>
					<view class="positionVeiw-map">
						<map
							style="width: 100%; height: 100%"
							:latitude="markers[0].latitude"
							:longitude="markers[0].longitude"
							:markers="markers"
							:scale="18"
							:enable-building="true"
							api-key="AIzaSyDlWn95MLJm3VOLBoTd5_mHIHXS5D98kP8"
						></map>
					</view>
				</view>
			</view>
		</view>

		<view class="cardView action">
			<view class="cardView-conter">
				<view class="positionVeiw">
					<view class="positionVeiw-title">常见问题</view>
					<view class="positionVeiw-tetx">以下是客户经常咨询的问题，如果您没有找到所需的答案，请随时联系我们</view>
					<el-collapse v-model="activeNames" accordion>
						<el-collapse-item class="collapseItem" v-for="(item,index) in collapse" :key="index" :title="item.title" :name="index">
							<view class="collapse-text">
								{{ item.text }}
							</view>
						</el-collapse-item>
					</el-collapse>
				</view>
			</view>
		</view>
		<!-- 底部导航 -->
		<footerView />
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import headerView from '@/components/header/index.vue'; //导航
import footerView from '@/components/footer/index.vue'; //底部导航
import formView from '@/components/formView/index.vue';

const activeNames = ref(null)
const collapse = ref([
	{'title':'如何选择适合我家的地毯？',text:'选择地毯时，您需要考虑多个因素，包括房间的用途、装修风格、空间大小和个人喜好等。我们的专业顾问可以根据您的具体需求，为您提供个性化的建议和方案。您也可以参观我们的展厅，亲身体验不同材质、颜色和图案的地毯效果'},
	{title:'REMAX地毯的价格范围是多少？',text:'REMAX地毯的价格因材质、尺寸、工艺和设计复杂度而异。我们的产品价格范围从数千元到数十万元不等，以满足不同客户的预算和需求。无论是入门级的高品质地毯，还是顶级的手工定制作品，我们都能为您提供满意的选择。'},
	{title:'定制一块地毯需要多长时间？',text:'定制地毯的生产周期取决于多个因素，包括设计复杂度、材质选择和尺寸大小等。一般来说，机织地毯的生产周期为2-4周，而手工编织地毯则需要4-12周不等。我们的销售顾问会在您下单时提供准确的生产时间预估，并随时向您更新订单进度。'},
	{title:'如何保养和清洁REMAX地毯？',text:'不同材质的地毯需要不同的保养方法。一般来说，我们建议定期吸尘以去除灰尘和杂物，避免阳光直射以防止褪色，及时清理污渍以防止渗透。对于顽固污渍，建议使用专业的地毯清洁剂或联系我们的售后服务团队。我们会为每款地毯提供详细的保养指南。'},
	{title:'REMAX提供哪些售后服务？',text:'REMAX提供全面的售后服务，包括专业的安装服务、质量保证期内的免费维修、终身维护咨询等。我们的产品享有1-5年不等的质保期，具体取决于产品类型和材质。此外，我们还提供地毯清洗和翻新服务，以帮助您的地毯保持最佳状态。'}
])


// 基本信息
const brandData = ref({
	title: '联系我们',
	text: '无论您是对我们的产品感兴趣，还是需要了解更多关于定制服务的信息，我们的团队都将竭诚为您提供专业的咨询和支持。',
	list: [
		{
			icon: 'custom-icon custom-icon-address',
			title: '总部地址',
			texts: ['上海市浦东新区张江高科技园区博云路2号']
		},
		{
			icon: 'custom-icon custom-icon-dianhua',
			title: '电话咨询',
			texts: ['+86 21 5888 8888']
		},
		{
			icon: 'custom-icon custom-icon-youjian',
			title: '邮箱咨询',
			texts: ['info@remaxcarpet.com']
		},
		{
			icon: 'custom-icon custom-icon-shijian',
			title: '工作时间',
			texts: ['周一至周五: 9:00 - 18:00', '周六: 10:00 - 16:00', '周日: 休息']
		}
	],
	contactInformation: [
		{ icon: 'custom-icon custom-icon-whatsapp', path: '', text: 'whatsapp' },
		{ icon: 'custom-icon custom-icon-ins', path: '', text: 'ins' },
		{ icon: 'custom-icon custom-icon-facebook-messenger', path: '', text: 'facebook' },
		{ icon: 'custom-icon custom-icon-a-tuite2', path: '', text: 'twitter' }
	]
});

const markers = ref([
	{
		longitude: 121.602345,
		latitude:  31.201234,
		title: '上海市浦东新区张江高科技园区博云路2号',
		callout:{
			content:'上海市浦东新区张江高科技园区博云路'
		},
		iconPath: 'https://res.ennew.com/image/webp/6163eed28ae0b8ddc04cfe1130123785.webp',
		width: 30,
		height: 30,
		id:89798779
	}
]);
</script>

<style scoped lang="scss">
.content {
	width: 100%;
	min-height: 100vh;
	background-color: #fff;

	.absolute {
		width: 100%;
		height: 240px;
		background: url('https://picsum.photos/id/179/1920/800') no-repeat center center;
		background-size: cover;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		&::after {
			content: '';
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			background-color: rgba(26, 54, 93, 0.6);
		}

		.titleView {
			width: auto;
			height: auto;
			position: relative;
			z-index: 2;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;

			&-text {
				font-size: 40px;
				color: #fff;
				font-weight: bold;
				text-align: center;
				line-height: 1.5;
			}

			&-span {
				font-size: 16px;
				display: flex;
				gap: 3px;
				margin: 0 auto;
				color: #fff;

				text {
					color: #b7922d;
				}
			}
		}
	}

	.cardView {
		width: 100%;
		height: auto;
		background-color: #fff;

		&.action {
			background-color: rgb(249, 250, 251);
		}

		&-conter {
			width: 100%;
			max-width: 1200px;
			margin: 0 auto;
			padding: 40px 0;
			box-sizing: border-box;

			.elRow {
				width: 100%;
				margin: 0 auto !important;

				.elCol {
					margin-bottom: 20px;
				}
			}

			.brandView {
				width: 100%;
				height: auto;
				color: rgb(26, 54, 93);

				&-title {
					font-size: 24px;
					font-weight: bold;
					margin-bottom: 20px;
				}

				&-text {
					width: 100%;
					font-size: 16px;
					margin-bottom: 20px;
				}

				&-list {
					width: 100%;
					height: auto;
					display: flex;
					margin-bottom: 10px;

					&-icon {
						width: 40px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgb(26 54 93 / 0.1);
						border-radius: 100%;
						margin-right: 10px;
						flex-shrink: 1;
						margin-top: 5px;
					}

					&-info {
						flex: 1;
						line-height: 1.5;
						&-title {
							width: 100%;
							height: auto;
							font-size: 18px;
						}
						&-text {
							font-size: 14px;
						}
					}
				}

				.iconVeiw {
					width: 100%;
					height: auto;
					display: flex;
					align-items: center;
					gap: 10px;

					.icon {
						width: 35px;
						height: 35px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: rgb(26 54 93 / 1);
						border-radius: 100%;
					}
				}
			}

			.positionVeiw {
				width: 100%;
				height: auto;
				color: rgb(26, 54, 93);
				text-align: center;

				&-title {
					width: 100%;
					height: auto;
					font-size: 24px;
					font-weight: 600;
					line-height: 1.5;
					margin-bottom: 4px;
				}

				&-tetx {
					width: 100%;
					height: auto;
					font-size: 14px;
					line-height: 1.5;
					margin-bottom: 20px;
				}

				&-map {
					width: 100%;
					height: 400px;
				}
			}
			
			:deep(.el-collapse){
				border: none;
				
				.el-collapse-item__wrap{
					border: none;
				}
			}
			
			.collapseItem{
				width: 100%;
				height: auto;
				border: none;
				margin-bottom: 20px;
				border-radius: 10px;
				overflow: hidden;
				
				:deep(.el-collapse-item__header){
					padding: 30px 10px;
					font-size: 16px;
					color: rgb(26, 54, 93);
					box-sizing: border-box;
					border: none;
					font-weight: bold;
				}
				
				.collapse-text{
					width: 100%;
					text-align: left;
					padding: 0 12px;
					box-sizing: border-box;
					color: rgb(26, 54, 93);
					font-size: 14px;
					border: none;
				}
			}
		}
	}
}

@media screen and (max-width: 768px) {
	.cardView-conter {
		padding: 40px 20px !important;

		.elCol {
			padding: 0 !important;
		}
	}
}
</style>
